<template>
  <div class="app-container myProject">
    <el-row :gutter="20" class="m-30-0">
      <el-col :xs="24" :sm="12">
        <el-button @click="dialogVisible = true" class="create" type="danger"> + {{ "生成项目token" }} </el-button>
      </el-col>
    </el-row>
    <!-- <FlexScroll ref="flexScroll" class="myProjectScroll" id="myProject" @scroll="nextPage"> -->
    <div class="d_row" v-loading="state.authorizationListLoading">
      <el-row :gutter="24">
        <el-col :xs="24" :sm="8" v-for="item in state.authorizationList" :key="item.id">
          <el-card class="box-card">
            <div class="dflex justify-between">
              <div class="f16333">{{ item.name }}</div>
              <!-- <img :src="del" alt="" srcset=""> -->
              <i class="iconfont icon-fuzhi" v-copy="item.authorization" />
            </div>
            <div class="token">
              <span>SecretKey：</span>
              <span class="f14333" v-copy="item.authorization">
                {{ item.authorization }}
              </span>
            </div>
            <div />
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 新增token -->
    <el-dialog
      class="dialogAdapter"
      style="border-radius: 10px"
      v-model="dialogVisible"
      title="生成项目Token"
      @close="resetForm"
      width="30%"
    >
      <el-form label-position="top" ref="formRef" :model="formData" :rules="formRules" label-width="110px">
        <el-form-item prop="name" label="项目名称">
          <el-input v-model="formData.name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item prop="exp" label="过期时间">
          <el-input onkeyup="value=value.replace(/[^\d]/g,'')" v-model="formData.exp" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreate">生成</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue"
// import del from "@/assets/docs/del.svg";
// import FlexScroll from '@/components/FlexScroll/index.vue';
import useMember from "../useMember"

import { ElMessage, type FormInstance, type FormRules } from "element-plus"

const { state, getAuthorizationList, getAPIAuthorizationAdd } = useMember()

//回调表单 end
const formRules: FormRules = reactive({
  name: [{ required: true, trigger: "blur", message: "请输入项目名称" }],
  exp: [
    {
      required: true,
      message: "请输入过期时间",
      trigger: "blur"
    }
  ]
})
const dialogVisible = ref<boolean>(false)
const formRef = ref<FormInstance | null>(null)

// 生成token表单数据
const formData = reactive({
  name: "",
  exp: ""
})

const resetForm = () => {
  formData.name = ""
  formData.exp = ""
}
const handleCreate = () => {
  formRef.value?.validate((valid: boolean, fields) => {
    if (valid) {
      getAPIAuthorizationAdd(formData)
        .then(() => {
          ElMessage.success("新增成功")
        })
        .finally(() => {
          dialogVisible.value = false
        })
    } else {
      console.error("表单校验不通过", fields)
    }
  })
}

onMounted(() => {
  getAuthorizationList()
})
</script>
<style lang="scss" scoped>
.myProject {
  .iconfont {
    font-size: 24px;
    cursor: pointer;
  }

  .callbackForm {
    justify-content: flex-end;

    .el-form-item {
      margin-bottom: 0;

      // margin-left: 20px;
      .callbackInput {
        width: 240px;
        padding-right: 30px;
      }
    }
  }

  .d_row {
    // height: calc(100vh - 90px - 263px - 79px - 30px)
    // height: calc(100vh - 600px);

    .el-col {
      margin-bottom: 12px;
    }
  }

  .f14333:hover {
    color: #c3181f;
    cursor: pointer;
    text-decoration: underline;
  }

  .box-card {
    height: 100%;

    img {
      cursor: pointer;
    }
  }

  .myProjectScroll {
    :deep(.content) {
      height: 100%;
    }
  }

  .token {
    background: #f9f9f9;
    border-radius: 6px;
    font-size: 14px;
    color: #999;
    overflow: hidden; //超出隐藏
    white-space: nowrap; //不折行
    text-overflow: ellipsis; //溢出显示省略号
    padding: 8px 12px;
    margin-top: 24px;
  }
}
</style>
